<template>
  <div class="dialog">
    <el-dialog
      custom-class="tech-dialog-cusha"
      :visible.sync="Dialog"
      @close="closeDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      :destroy-on-close="true"
      :fullscreen="true"
    >
      <div class="header" slot="title">
        <div class="today">
          <img src="~@/assets/img/time.png" width="22" />
          <span>{{ today }}</span>
        </div>
      </div>
      <div class="main">
        <el-radio-group v-model="tableToggle" size="medium">
          <el-radio-button label="车间"></el-radio-button>
          <el-radio-button label="用工"></el-radio-button>
          <el-radio-button label="明细"></el-radio-button>
        </el-radio-group>
        <Legend :status="status" v-show="tableToggle !== '明细'">
          <div class="xiaolv"></div>
        </Legend>
      </div>
      <div class="content" id="CushaSvg" v-show="tableToggle !== '明细'">
        <!-- 粗纱2 -->
        <CuSha :inline="true" />
      </div>
      <div class="table">
        <div v-show="tableToggle !== '明细'" class="enlarge" @click="openEnlargeDialog">
          <i class="el-icon-full-screen" />
        </div>
        <el-table
          v-show="tableToggle == '车间'"
          :data="tableData"
          :max-height="scrollY"
          border
          style="width: 100%;height:auto"
          v-loading="loading"
          empty-text=" "
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-table-column prop="pz" min-width="16%" label="品种"></el-table-column>
          <el-table-column min-width="16%" label="车台号">
            <template slot-scope="{ row }">
              <span>粗纱{{ getSeiresDevsn(row.devSnArea) }}号</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="xiaolvavg"
            min-width="14%"
            label="效率(%)"
            :formatter="percentFormatter"
          ></el-table-column>
          <el-table-column
            prop="jhclsum"
            min-width="18%"
            label="计划产量(kg)"
            :formatter="floatFormatter"
          ></el-table-column>
          <el-table-column
            prop="sjclsum"
            min-width="18%"
            label="实际产量(kg)"
            :formatter="floatFormatter"
          ></el-table-column>
          <el-table-column prop="dh" min-width="18%" label="电耗(kw·h)" :formatter="floatFormatter"></el-table-column>
          <el-table-column
            prop="dshd"
            min-width="15%"
            label="吨纱耗电(kw·h/吨)"
            :formatter="floatFormatter"
          ></el-table-column>
        </el-table>
        <div v-show="tableToggle == '用工'">
          <el-table
            ref="table1"
            v-show="worker == 'detail'"
            :data="tableData1"
            :max-height="scrollY"
            border
            style="width: 100%;height:auto"
            v-loading="loading1"
            empty-text=" "
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            :span-method="objectSpanMethod1"
            @sort-change="() => sortChange('1')"
          >
            <el-table-column prop="name" min-width="16%">
              <template #header>
                <span style="color:#58d9f9;cursor: pointer;text-decoration: underline;" @click="toggleWorker('sum')">
                  挡车工
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="gh" min-width="12%" label="工号">
              <template slot-scope="{ row }">
                {{ row.gh ? row.gh : "" }}
              </template>
            </el-table-column>
            <el-table-column prop="pz" min-width="16%" label="品种"></el-table-column>
            <el-table-column min-width="16%" label="车台号">
              <template slot-scope="{ row }">
                <span>粗纱{{ row.devSn }}号</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="xiaolv"
              min-width="14%"
              label="效率(%)"
              :formatter="percentFormatter"
              sortable
              :sort-by="['xiaolv', 'devSn']"
            ></el-table-column>
            <el-table-column prop="cl" min-width="18%" label="产量(kg)" :formatter="floatFormatter"></el-table-column>
            <el-table-column
              prop="jhcl"
              min-width="18%"
              label="计划产量(kg)"
              :formatter="floatFormatter"
            ></el-table-column>
            <el-table-column prop="gs" min-width="16%" label="工时(分钟)" :formatter="floatFormatter"></el-table-column>
            <el-table-column prop="gz" min-width="16%" label="工资(元)" :formatter="floatFormatter"></el-table-column>
          </el-table>
          <el-table
            ref="table2"
            v-show="worker == 'sum'"
            :data="tableData3"
            :max-height="scrollY"
            border
            style="width: 100%;height:auto"
            v-loading="loading1"
            empty-text=" "
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            :span-method="objectSpanMethod2"
            @sort-change="() => sortChange('2')"
          >
            <el-table-column prop="name" min-width="16%">
              <template #header>
                <span style="color:#58d9f9;cursor: pointer;text-decoration: underline;" @click="toggleWorker('detail')">
                  挡车工汇总
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="gh" min-width="12%" label="工号">
              <template slot-scope="{ row }">
                {{ row.gh ? row.gh : "" }}
              </template>
            </el-table-column>
            <el-table-column prop="pz" min-width="16%" label="品种"></el-table-column>
            <el-table-column min-width="16%" label="车台号">
              <template slot-scope="{ row }">
                <span>粗纱{{ getSeiresDevsn(row.devSnArea) }}号</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="avg_xiaolv"
              min-width="14%"
              label="效率(%)"
              :formatter="percentFormatter"
              sortable
            ></el-table-column>
            <el-table-column
              prop="sum_cl"
              min-width="18%"
              label="产量(kg)"
              :formatter="floatFormatter"
            ></el-table-column>
            <el-table-column
              prop="sum_jhcl"
              min-width="18%"
              label="计划产量(kg)"
              :formatter="floatFormatter"
            ></el-table-column>
            <el-table-column prop="gs" min-width="16%" label="工时(分钟)" :formatter="floatFormatter"></el-table-column>
            <el-table-column
              prop="sum_gz"
              min-width="16%"
              label="工资(元)"
              :formatter="floatFormatter"
            ></el-table-column>
          </el-table>
        </div>
        <el-table
          v-show="tableToggle == '明细'"
          :data="tableData2"
          :max-height="scrollY1"
          border
          style="width: 100%;height:auto;margin-top:20px;"
          v-loading="loading2"
          empty-text=" "
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-table-column prop="pz" min-width="12%" label="品种" sortable :sort-by="['pz', 'devSn']"></el-table-column>
          <el-table-column min-width="16%" label="车台号" sortable :sort-by="['devSn']">
            <template slot-scope="{ row }">
              <span>粗纱{{ row.devSn }}号</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="xiaolv"
            min-width="12%"
            label="效率(%)"
            :formatter="percentFormatter"
            sortable
            :sort-by="['xiaolv', 'devSn']"
          ></el-table-column>
          <el-table-column
            prop="dqcl"
            min-width="14%"
            label="当前产量(kg)"
            :formatter="floatFormatter"
          ></el-table-column>
          <el-table-column
            prop="dqjhcl"
            min-width="16%"
            label="当前计划产量(kg)"
            :formatter="floatFormatter"
          ></el-table-column>
          <el-table-column
            prop="bjhcl"
            min-width="16%"
            label="班计划产量(kg)"
            :formatter="floatFormatter"
          ></el-table-column>
          <el-table-column
            prop="wcl"
            min-width="14%"
            label="完成率(%)"
            :formatter="percentFloatFormatter"
          ></el-table-column>
          <el-table-column
            prop="llxs"
            min-width="20%"
            label="罗拉线速(米/分钟)"
            sortable
            :sort-by="['llxs', 'devSn']"
            :formatter="floatFormatter"
          ></el-table-column>
          <el-table-column
            prop="ds"
            min-width="18%"
            label="锭子转速(转/分)"
            :formatter="floatFormatter"
          ></el-table-column>
          <el-table-column
            prop="iavg"
            min-width="18%"
            label="当前电流(安)"
            sortable
            :sort-by="['iavg', 'devSn']"
            :formatter="floatFormatter"
          ></el-table-column>
          <el-table-column
            prop="uavg"
            min-width="18%"
            label="当前电压(伏)"
            :formatter="floatFormatter"
          ></el-table-column>
          <el-table-column
            prop="dbdh"
            min-width="18%"
            label="当班电耗(度)"
            :formatter="floatFormatter"
            sortable
            :sort-by="['dbdh', 'devSn']"
          ></el-table-column>
          <el-table-column
            prop="wmdh"
            min-width="20%"
            label="万米电耗(度/万米)"
            :formatter="floatFormatter"
            sortable
            :sort-by="['wmdh', 'devSn']"
          ></el-table-column>
          <el-table-column
            prop="dsdh"
            min-width="20%"
            label="吨纱电耗(度/吨)"
            :formatter="floatFormatter"
            sortable
            :sort-by="['dsdh', 'devSn']"
          ></el-table-column>
        </el-table>
      </div>

      <!-- 放大弹框 -->
      <el-dialog
        custom-class="echart-dialog"
        :visible.sync="enlargeDialog"
        :modal-append-to-body="false"
        :append-to-body="true"
        :destroy-on-close="true"
        :fullscreen="true"
        @close="enlargeDialog = false"
      >
        <el-table
          v-show="tableToggle == '车间'"
          :data="tableData"
          :max-height="scrollY2"
          border
          style="width: 100%;height:auto;overflow-y:hidden"
          v-loading="loading"
          empty-text=" "
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-table-column prop="pz" min-width="16%" label="品种"></el-table-column>
          <el-table-column min-width="16%" label="车台号">
            <template slot-scope="{ row }">
              <span>粗纱{{ getSeiresDevsn(row.devSnArea) }}号</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="xiaolvavg"
            min-width="14%"
            label="效率(%)"
            :formatter="percentFormatter"
          ></el-table-column>
          <el-table-column
            prop="jhclsum"
            min-width="18%"
            label="计划产量(kg)"
            :formatter="floatFormatter"
          ></el-table-column>
          <el-table-column
            prop="sjclsum"
            min-width="18%"
            label="实际产量(kg)"
            :formatter="floatFormatter"
          ></el-table-column>
          <el-table-column prop="dh" min-width="18%" label="电耗(kw·h)" :formatter="floatFormatter"></el-table-column>
          <el-table-column
            prop="dshd"
            min-width="15%"
            label="吨纱耗电(kw·h/吨)"
            :formatter="floatFormatter"
          ></el-table-column>
        </el-table>
        <div v-show="tableToggle == '用工'">
          <el-table
            ref="table3"
            v-show="worker == 'detail'"
            :data="tableData1"
            :max-height="scrollY2"
            border
            style="width: 100%;height:auto;overflow-y:hidden"
            v-loading="loading1"
            empty-text=" "
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            :span-method="objectSpanMethod3"
            @sort-change="() => sortChange('3')"
          >
            <el-table-column prop="name" min-width="16%">
              <template #header>
                <span style="color:#58d9f9;cursor: pointer;text-decoration: underline;" @click="toggleWorker('sum')">
                  挡车工
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="gh" min-width="12%" label="工号">
              <template slot-scope="{ row }">
                {{ row.gh ? row.gh : "" }}
              </template>
            </el-table-column>
            <el-table-column prop="pz" min-width="16%" label="品种"></el-table-column>
            <el-table-column min-width="16%" label="车台号">
              <template slot-scope="{ row }">
                <span>粗纱{{ row.devSn }}号</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="xiaolv"
              min-width="14%"
              label="效率(%)"
              :formatter="percentFormatter"
              sortable
              :sort-by="['xiaolv', 'devSn']"
            ></el-table-column>
            <el-table-column prop="cl" min-width="18%" label="产量(kg)" :formatter="floatFormatter"></el-table-column>
            <el-table-column
              prop="jhcl"
              min-width="18%"
              label="计划产量(kg)"
              :formatter="floatFormatter"
            ></el-table-column>
            <el-table-column prop="gs" min-width="16%" label="工时(分钟)" :formatter="floatFormatter"></el-table-column>
            <el-table-column prop="gz" min-width="16%" label="工资(元)" :formatter="floatFormatter"></el-table-column>
          </el-table>
          <el-table
            v-show="worker == 'sum'"
            ref="table4"
            :data="tableData3"
            :max-height="scrollY2"
            border
            style="width: 100%;height:auto;overflow-y:hidden"
            v-loading="loading1"
            empty-text=" "
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            :span-method="objectSpanMethod4"
            @sort-change="() => sortChange('4')"
          >
            <el-table-column prop="name" min-width="16%">
              <template #header>
                <span style="color:#58d9f9;cursor: pointer;text-decoration: underline;" @click="toggleWorker('detail')">
                  挡车工汇总
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="gh" min-width="12%" label="工号">
              <template slot-scope="{ row }">
                {{ row.gh ? row.gh : "" }}
              </template>
            </el-table-column>
            <el-table-column prop="pz" min-width="16%" label="品种"></el-table-column>
            <el-table-column min-width="16%" label="车台号">
              <template slot-scope="{ row }">
                <span>粗纱{{ getSeiresDevsn(row.devSnArea) }}号</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="avg_xiaolv"
              min-width="14%"
              label="效率(%)"
              :formatter="percentFormatter"
              sortable
            ></el-table-column>
            <el-table-column
              prop="sum_cl"
              min-width="18%"
              label="产量(kg)"
              :formatter="floatFormatter"
            ></el-table-column>
            <el-table-column
              prop="sum_jhcl"
              min-width="18%"
              label="计划产量(kg)"
              :formatter="floatFormatter"
            ></el-table-column>
            <el-table-column prop="gs" min-width="16%" label="工时(分钟)" :formatter="floatFormatter"></el-table-column>
            <el-table-column
              prop="sum_gz"
              min-width="16%"
              label="工资(元)"
              :formatter="floatFormatter"
            ></el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import Legend from "@/components/Legend";
import CuSha from "@/components/CuSha";
import { mul, toFixed } from "@/utils/caculate";
export default {
  name: "cushaDialogTech",
  components: {
    CuSha,
    Legend
  },
  data() {
    return {
      Dialog: true,
      today: "",
      scrollY: 0,
      scrollY1: 0,
      scrollY2: 0,
      tableToggle: "车间",
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      loading: true,
      loading1: true,
      loading2: true,
      worker: "detail",
      areaArr1: [], //表格行数组
      areaSpan1: 0,
      areaArr2: [], //表格行数组
      areaSpan2: 0,
      areaArr3: [], //表格行数组
      areaSpan3: 0,
      areaArr4: [], //表格行数组
      areaSpan4: 0,
      enlargeDialog: false,
      status: [
        { label: "运行", data: 0 },
        { label: "停止", data: 0 },
        { label: "故障", data: 0 },
        { label: "满纱满桶", data: 0 },
        { label: "通讯失败", data: 0 },
        { label: "计划停台", data: 0 }
      ]
    };
  },
  computed: {
    runningStatus() {
      return this.$store.state.runningStatus;
    },
    cuShaGroupNewestState() {
      return this.$store.state.cuShaGroupNewestState;
    },
    cuShaWorkerGroupNewestState() {
      return this.$store.state.cuShaWorkerGroupNewestState;
    },
    cuShaDetailGroupNewestState() {
      return this.$store.state.cuShaDetailGroupNewestState;
    },
    cuShaWorkerSumGroupNewestState() {
      return this.$store.state.cuShaWorkerSumGroupNewestState;
    }
  },
  watch: {
    runningStatus: {
      immediate: true,
      handler(val) {
        if (val.code == 1) {
          let { data } = val;
          data = data.filter((item) => {
            return item.gongxu == "粗纱";
          });
          for (let i = 0; i < data.length; i++) {
            this.status[parseInt(data[i]["stateCode"]) - 1]["data"] = data[i]["num"];
          }
        }
      }
    },
    cuShaGroupNewestState: {
      immediate: true,
      handler(val) {
        this.tableData = val.data;
        this.loading = false;
      }
    },
    cuShaWorkerGroupNewestState: {
      immediate: true,
      handler(val) {
        let params = ["xiaolv", "devSn"];
        let { data } = val;
        data.map((item) => {
          params.map((param) => {
            item[param] = Number(item[param]);
          });
        });
        this.clearSort("table1");
        this.clearSort("table3");
        this.mergeTable(data, "1");
        this.mergeTable(data, "3");
        this.tableData1 = data;
        this.loading1 = false;
      }
    },
    cuShaDetailGroupNewestState: {
      immediate: true,
      handler(val) {
        let params = ["devSn", "xiaolv", "llxs", "iavg", "dbdh", "wmdh"];
        let { data } = val;
        data.map((item) => {
          params.map((param) => {
            item[param] = Number(item[param]);
          });
        });
        this.tableData2 = data;
        this.loading2 = false;
      }
    },
    cuShaWorkerSumGroupNewestState: {
      immediate: true,
      handler(val) {
        let params = ["avg_xiaolv"];
        let { data } = val;
        data.map((item) => {
          params.map((param) => {
            item[param] = toFixed(item[param]);
          });
        });
        this.clearSort("table2");
        this.clearSort("table4");
        this.mergeTable(data, "2");
        this.mergeTable(data, "4");
        this.tableData3 = val.data;
      }
    }
  },
  created() {
    this.loading = true;
    this.today = this.getNowFormatDate();
  },
  mounted() {
    this.$nextTick(() => {
      let top = document.body.clientHeight;
      let innerTop = document.querySelector("#CushaSvg").offsetHeight;
      this.scrollY = top - innerTop - 66 - 48 - 35 - 40;
      this.scrollY1 = top - 66 - 48 - 35 - 40;
      this.scrollY2 = top - 120;
    });
  },
  methods: {
    // 获取连续车台
    getSeiresDevsn(arr) {
      var result = [],
        i = 0,
        str = "";
      if (arr.length > 0) {
        result[i] = [arr[0]];
        arr.reduce(function(prev, cur) {
          parseInt(cur) - parseInt(prev) === 1 ? result[i].push(cur) : (result[++i] = [cur]);
          return cur;
        });
        result.map((item) => {
          if (item.length > 1) {
            str += `${item[0]}-${item[item.length - 1]}、`;
          } else {
            str += `${item[0]}、`;
          }
        });
        str = str.substring(0, str.length - 1);
      } else {
        str = "";
      }
      return str;
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    percentFormatter(row, column, cellValue) {
      return toFixed(cellValue) + "%";
    },
    percentFloatFormatter(row, column, cellValue) {
      return toFixed(cellValue) + "%";
    },
    floatFormatter(row, column, cellValue) {
      return toFixed(cellValue);
    },
    mulFormatter(row, column, cellValue) {
      return toFixed(mul(cellValue, 0.01));
    },
    showDialog() {
      this.Dialog = true;
    },
    // 重新进入1.5级弹窗轮询
    getTableData() {
      this.$EventBus.$emit("inlineDialog", "open", "CUSHA", { start: 1, end: 16 });
    },
    // 关闭1.5级弹窗
    closeDialog() {
      this.$parent.closeDialogTech();
    },
    // 合并表格
    mergeTable(data, index) {
      this["areaArr" + index] = [];
      this["areaSpan" + index] = 0;
      let areaArr = this["areaArr" + index];
      let areaSpan = this["areaSpan" + index];
      for (let i = 0; i < data.length; i++) {
        if (i == 0) {
          areaArr.push(1);
          areaSpan = 0;
        } else {
          if (data[i].name == data[i - 1].name) {
            areaArr[areaSpan] += 1;
            areaArr.push(0);
          } else {
            areaArr.push(1);
            areaSpan = i;
          }
        }
      }
    },
    // 表格合并
    objectSpanMethod1({ rowIndex, columnIndex }) {
      // 总计行
      if (columnIndex === 0) {
        const row1 = this.areaArr1[rowIndex];
        const col1 = row1 > 0 ? 1 : 0;
        return {
          rowspan: row1,
          colspan: col1
        };
      }
    },
    // 表格合并
    objectSpanMethod2({ rowIndex, columnIndex }) {
      // 总计行
      if (columnIndex === 0) {
        const row1 = this.areaArr2[rowIndex];
        const col1 = row1 > 0 ? 1 : 0;
        return {
          rowspan: row1,
          colspan: col1
        };
      }
    },
    // 表格合并
    objectSpanMethod3({ rowIndex, columnIndex }) {
      // 总计行
      if (columnIndex === 0) {
        const row1 = this.areaArr3[rowIndex];
        const col1 = row1 > 0 ? 1 : 0;
        return {
          rowspan: row1,
          colspan: col1
        };
      }
    },
    // 表格合并
    objectSpanMethod4({ rowIndex, columnIndex }) {
      // 总计行
      if (columnIndex === 0) {
        const row1 = this.areaArr4[rowIndex];
        const col1 = row1 > 0 ? 1 : 0;
        return {
          rowspan: row1,
          colspan: col1
        };
      }
    },
    sortChange(tableindex) {
      let data = this.$refs["table" + tableindex].tableData;
      this.mergeTable(data, tableindex);
    },
    clearSort(ref) {
      if (this.$refs[ref]) {
        this.$refs[ref].clearSort();
      }
    },
    toggleWorker(val) {
      this.worker = val;
    },
    openEnlargeDialog() {
      this.enlargeDialog = true;
    }
  }
};
</script>

<style lang="scss">
.tech-dialog-cusha.el-dialog {
  height: 100vh;
  background: rgb(26, 35, 45, 0.79);
  border: 3px solid #52abb1;
  margin: 0 auto;
  .el-dialog__headerbtn {
    top: 3%;
  }
  .header {
    height: 66px;
    background: url("~@/assets/img/cushaHeader.svg") no-repeat;
    background-size: contain;
    background-position-x: center;
    position: relative;
    .today {
      display: flex;
      align-items: center;
      position: absolute;
      top: 25px;
      left: 28px;
      span {
        margin-left: 10px;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
      }
    }
  }
  .main {
    display: flex;
    justify-content: space-between;
    .legend .xiaolv {
      width: 300px;
      height: 20px;
      background: url("~@/assets/img/status/legend.png") no-repeat;
      background-size: cover;
      margin-left: 50px;
    }
    .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
      box-shadow: none;
    }
  }
  .content {
    height: calc((100vh - 100px) * 0.6);
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    .cusha .cusha-inline {
      display: grid;
      grid-template-rows: repeat(7, 50px);
      grid-column-gap: 90px;
      grid-auto-flow: column;
      position: relative;
      margin-top: 50px;
      .cusha_item {
        transform: scale(1.8);
      }
      .cusha_row {
        margin-top: 346px;
      }
      .dongli:first-child {
        position: absolute;
        left: -40px;
      }
      .dongli1 {
        position: absolute;
        bottom: -4px;
      }
    }
  }
  // element cover style
  .el-dialog__header {
    padding: 0 20px 0 20px;
  }
  .el-dialog__body {
    height: calc(100% - 66px);
    padding: 24px 48px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .el-radio-button__inner {
    width: 90px;
    height: 35px;
    padding: 0;
    text-align: center;
    line-height: 35px;
    font-size: 16px;
    color: #fff;
    margin-right: 2px;
    background: rgba(38, 146, 156, 0.4);
    border-radius: 4px 4px 0 0 !important;
    border: 1px solid rgba(38, 146, 156, 0.4);
  }
  .el-radio-button:first-child .el-radio-button__inner {
    border-left: none;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background: #26929c;
    border: 1px solid #69d7fb;
  }
  .el-table {
    overflow-y: hidden;
  }
}
</style>
